import React, {useState} from 'react';
import {
    UploadOutlined, UserOutlined, VideoCameraOutlined,
    SettingOutlined,
    CloudSyncOutlined
} from '@ant-design/icons';
import {Layout, Menu, theme,Typography} from 'antd';
import ConfigIndex from "../config";
import LogIndex from "../log";
import Title from "antd/es/skeleton/Title";

const {Header, Content, Footer, Sider} = Layout;

const items = [UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
    (icon, index) => ({
        key: String(index + 1),
        icon: React.createElement(icon),
        label: `nav ${index + 1}`,
    }),
);

const menuData = [
        {key: 1, label: '服务配置', icon: <SettingOutlined/>, page: <ConfigIndex/>},
        {key: 2, label: '同步日志', icon: <CloudSyncOutlined/>, page: <LogIndex/>},
    ],

    HomeIndex: React.FC = () => {
        const { Title } = Typography;
        const {
            token: {colorBgContainer, borderRadiusLG},
        } = theme.useToken();

        const [menuIndex, setMenuIndex] = useState(1)
        const menuClick = (item) => {
            setMenuIndex(item.key)
            console.log(item)
        }
        return (
            <Layout>
                <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    onBreakpoint={(broken) => {
                        console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log(collapsed, type);
                    }}
                >
                    <div className="demo-logo-vertical"/>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} items={menuData} onClick={menuClick}/>
                </Sider>
                <Layout>
                    <Header style={{padding: 0, background: colorBgContainer,paddingLeft:20}}>
                        <Title level={3}>{menuData[menuIndex-1].label}</Title>
                        </Header>
                    <Content style={{margin: '24px 16px 0'}}>
                        <div
                            style={{
                                padding: 24,
                                minHeight: 600,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            {menuData[menuIndex-1].page}
                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>
                        Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
        );
    };

export default HomeIndex;
